<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>橙子之家</title>
    <link rel="stylesheet" href="sider.css">
</head>

<body>
    <div class="page">
        <div class="sidebar">
            <h2>橙子之家</h2>
            <a href="home.html">首页</a>
            <a href="pageOne.html">栽培技术</a>
            <a href="pageTwo.html">药用价值</a>
            <a href="PageThree.html">相关知识</a>
            <a href="PageFour.html">新鲜橙子</a>
            <a href="pageFive.html">留言板</a>
        </div>

        <div class="content">
            <!-- 这是首页的标题部分 -->
            <div class="title">
                <h1>WelCome to the home of oranges</h1>
            </div>

            <!-- 这是图片热点区域部分 -->
            <div class="img">
                <!-- 图片 -->
                <img src="./assert/img/newCenter.png" alt="带有热点区域的图片" usemap="#image-map">

                <!-- 定义图片映射 -->
                <map name="image-map">
                    <!-- 主页图标 -->
                    <area shape="circle" coords="150,90,150" href="home.html" alt="主页" title="主页">
                    <!-- 环保图标 -->
                    <area shape="circle" coords="500,90,150" href="pageOne.html" alt="栽培技术" title="栽培技术">
                    <!-- 药房图标 -->
                    <area shape="circle" coords="800,90,150" href="pageTwo.html" alt="药用价值" title="药用价值">
                    <!-- 教育图标 -->
                    <area shape="circle" coords="150,300,150" href="pageThree.html" alt="相关知识" title="相关知识">
                    <!-- 水果图标 -->
                    <area shape="circle" coords="500,300,150" href="pageFour.html" alt="新鲜橙子" title="新鲜橙子">
                    <!-- 聊天图标 -->
                    <area shape="circle" coords="800,300,150" href="pageFive.html" alt="留言板" title="留言板">
                </map>
            </div>
        </div>
    </div>
</body>
<style>
    /* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
    /* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
    @font-face {
        font-family: "Thin";
        src: url("./assert/font/lcpN4rU8LZcQ/hqNB0HSXIaJL.woff2") format("woff2"),
            url("./assert/font/lcpN4rU8LZcQ/hqNB0HSXIaJL.woff") format("woff");
        /* src: url("./assert/font/4q8TlRenPQls/PHqPuFNhSOqo.woff2") format("woff2"), */
        /* url("./assert/font/4q8TlRenPQls/PHqPuFNhSOqo.woff") format("woff"); */
        font-display: swap;
    }

    /* webSite/assert/font/lcpN4rU8LZcQ/hqNB0HSXIaJL.woff */
    /* webSite/assert/font/uGFLnLcckjCC/Z1eaFFZZPDjN.woff */
    .content {
        background: url(./assert/img/bg3.png) no-repeat center;
        background-size: cover;
    }

    .content .title h1 {
        color: #d5950b;
        font-size: 120px;
        margin-top: 6%;
        /* 更改字体 */
        font-family: "Thin", Arial, sans-serif;
        /* 使用新字体 */
    }

    .content .title {
        text-align: center;
    }

    .content .img {
        margin-top: 3%;
        margin-left: 25.5%;
        height: 50%;
        width: 50%;

    }

    .content .img img {
        height: 100%;
        width: 100%;
    }
</style>

</html>